<template>
  <view>
    <nav-bar title="项目详情"></nav-bar>
    <scroll-view scroll-y :style="{ height: mainHeight }">
      <view class="swiper">
        <u-swiper 
          :list="list5" 
          @change="change" 
          :autoplay="true"
          height="200" 
          interval="5000" 
          :indicator="true">
          <view slot="indicator" class="indicator">
            <view class="indicator__dot" v-for="(item, index) in list5" :key="index"
              :class="[index === current && 'indicator__dot--active']">
            </view>
          </view>
        </u-swiper>
      </view>
      <view class="contain">
        <view class="preview" v-for="(item,index) in detailData" :key="index" >
        <view class="title">
          <view class="box-line">
          </view>
          <view class="text">{{ item.title }}</view>
        </view>
        <view class="des">{{ item.des }}</view>
      </view>
      </view>
    </scroll-view>
    <view class="btn_edit">
			<view class="btn_cont" @click="toReserve">
				去预约
			</view>
		</view>
    <u-datetime-picker
			ref="datetimePicker"
			:show="datePickerShow"
			v-model="chooseDate"
			mode="datetime"
			:formatter="formatter"
			:minDate="minDate"
      :visibleItemCount="9"
			@confirm="confirmDate"
			@cancel="datePickerShow=false"
		></u-datetime-picker>
  </view>
</template>

<script>
import NavBar from "../../components/nav-bar";
import Search from '../../components/search/index'
import shopList from "@/subPages/components/shopList"
import api_home from '@/api/home'
export default {
  name: "shopDetail",
  components: { NavBar, Search, shopList },
  data() {
    return {
      mainHeight: '',
      current: 0,
      list5: [],
      detailData:[
        {
          title:'适宜人群',
          des:'applyPeople'
        },
        {
          title:'调理方法',
          des:'method'
        },
        {
          title:'调理流程',
          des:'flow'
        },
        {
          title:'禁忌症',
          des:'contraindication'
        }
      ],
      transferData: {},
      chooseProject: {},
      datePickerShow: false,
      chooseDate: Number(new Date()),
      minDate: new Date().getTime()
    }
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight
  },
  onLoad(options) {
    if (options.transferData) {
      this.transferData = JSON.parse(decodeURIComponent(options.transferData))
    }
    if (options.item) {
      this.chooseProject = JSON.parse(decodeURIComponent(options.item))
    }
    this.getDetail(this.chooseProject.id)
  },
  methods: {
    onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
    change(e) {
      this.current = e.current
    },
    confirmDate(e) {
      // 获取年、月、日、时、分、秒
      // 使用 Date 对象将时间戳转换为可读的日期和时间格式
      var date = new Date(e.value)
      // 获取年、月、日、时、分
      var year = date.getFullYear()
      var month = ('0' + (date.getMonth() + 1)).slice(-2) // 月份从 0 开始，需加一并补零
      var day = ('0' + date.getDate()).slice(-2) // 补零
      var hours = ('0' + date.getHours()).slice(-2) // 补零
      var minutes = ('0' + date.getMinutes()).slice(-2)
      var second = ('0' + date.getSeconds()).slice(-2)
      
      // 格式化日期和时间字符串
      var formattedDate = year + '-' + month + '-' + day
      var formattedTime = hours + ':' + minutes + ':' + second
      
      // 将格式化后的日期和时间存储在相应的字段中
      var reserveDate = formattedDate
      var reserveTime = formattedTime
      const transferData = {
        ...this.transferData,
        projectId: this.chooseProject.id,
        projectName: this.chooseProject.itemName,
        price: this.chooseProject.price,
        memberType: this.chooseProject.memberType,
        duration: this.chooseProject.duration,
        reserveDate: reserveDate,
        reserveTime: reserveTime
      }

      const params = encodeURIComponent(JSON.stringify(transferData))
      uni.navigateTo({
        url: `/subPages/home/chooseMaster?transferData=${params}`
      })

      this.datePickerShow = false
    },
    toReserve() {
      if (this.transferData.reserveDate) {
        const transferData = {
          ...this.transferData,
          projectId: this.chooseProject.id,
          projectName: this.chooseProject.itemName,
          price: this.chooseProject.price,
          memberType: this.chooseProject.memberType,
          duration: this.chooseProject.duration
        }

        const params = encodeURIComponent(JSON.stringify(transferData))
        uni.navigateTo({
          url: `/subPages/home/chooseMaster?transferData=${params}`
        })
      } else {
        this.datePickerShow = true
      }
    },
    getDetail(id) {
      api_home.fetchProjectDetail(id).then((res) => {
			this.list5 = res.data.img.split(",")
			this.detailData.forEach((item) => {
			item.des = res.data[item.des]
        })
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.indicator {
  @include flex(row);
  justify-content: center;

  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 5px;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
    }
  }
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #FFFFFF;
    font-size: 12px;
  }
}
.contain {
  width: 100%;
  padding: 8rpx 40rpx 102rpx;
  .preview {
  opacity: 1;
  border-radius: 17rpx;
  background: rgba(255, 255, 255, 1);
  margin-top: 24rpx;
  padding: 26rpx 41rpx 34rpx 39rpx;

  .title {
    position: relative;
    width: 100%;
    margin-left: -39rpx;
    margin-bottom: 20rpx;

    .box-line {
      position: absolute;
      left: 0;
      top: 0;
      width: 15rpx;
      height: 48rpx;
      opacity: 1;
      background: rgba(194, 126, 21, 1);

    }
    .text {
      margin-left: 44rpx;
      font-size: 38rpx;
      font-weight: 500;
    }
  }
  .des {
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0rpx;
    line-height: 40.54rpx;
    color: rgba(51, 51, 51, 1);

  }

}
}
</style>